<template>
  <view class="container">
    <!--  未登录 -->
    <view class="no-login" v-if="!hasLogin">
      <view class="img-box">
        <image
          src="/static/images/empty_cart.png"
          style="width: 300rpx"
          mode="widthFix"
        ></image>
      </view>
      <view style="color: #141414">购物车空空如也</view>
      <view style="color: #b39385; margin-top: 5px">别忘了对自己好点</view>
      <view class="btn-login" v-on:tap="goToLogin">去登录</view>
    </view>

    <!-- hasLogin -->
    <scroll-view style="height: 100vh" scroll-y v-else>
      <view class="wrapper">
        <view class="products" v-if="cart.length > 0">
          <view
            class="product"
            v-for="(good, key) in cart"
            :key="key"
            @tap="goToDetail(good)"
          >
            <image
              :src="imageUrl + good.FThumbImage"
              mode="aspectFit"
              class="image"
            ></image>

            <view class="content">
              <view class="name">{{ good.FName }}</view>

              <view class="price">
                <view>
                  <text class="symbol">￥</text>
                  <text>{{ good.FPrice }}</text>
                </view>
                <actions
                  :number="cart.find((i) => i.FGoodsID == good.FGoodsID).FQty"
                  @add="handleAddToCart(good)"
                  @minus="handleMinusFromCart(good)"
                />
              </view>
            </view>
          </view>
        </view>
        <view
          v-else
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 30px;
          "
        >
          <image
            src="/static/images/empty_cart.png"
            style="width: 300rpx"
            mode="widthFix"
          />
          <view style="color: #141414">购物车空空如也</view>
          <view style="color: #b39385; margin-top: 5px">别忘了对自己好点</view>
          <view
            style="
              margin-top: 25px;
              padding: 10px 30px;
              color: #fff;
              width: 60px;
              background-color: #ff2a35;
              border-radius: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            v-on:tap="goShopping"
            >去购物</view
          >
        </view>
      </view>
      <cartBar
        :hasLogin="hasLogin"
        :cart="cart"
        :tCount="tCount"
        :tMoney="tMoney"
        :showIcon="false"
      />
    </scroll-view>
  </view>
</template>
<script>
import { ref } from "@vue/composition-api";
import {
  uGetStorageSync,
  uModal,
  uNavigateTo,
  uSwitchTab,
  uToast,
} from "../../utils/uniUtils";
import { useUser } from "../../store/useUser";
import { storeToRefs } from "pinia";
import { useShop } from "../../store/useShop";
import Actions from "./components/actions/actions.vue";
import CartBar from "../../components/cart-bar/cart-bar.vue";

export default {
  components: {
    Actions,
    CartBar,
  },
  setup(props) {
    /* datas */

    // const { proxy } =	getCurrentInstance();
    const isLoaded = ref(false);
    /* hooks */

    const { hasLogin } = storeToRefs(useUser());
    const { cart, tCount, tMoney } = storeToRefs(useShop());

    /* methods */
    function goToLogin() {
      uNavigateTo("/pages/login/login");
      /*    if (uGetStorageSync("hasBindStore")) {
      } else {
        uToast("未绑定店铺~", "error");
      } */
    }

    async function handleAddToCart(product) {
      //添加到购物车
      if (useUser().hasLogin) {
        await useShop().AddToCart(product.FGoodsID, product.FMallPrice);
      } else {
        uNavigateTo("/pages/login/login");
  /*       if (uGetStorageSync("hasBindStore")) {
        } else {
          uToast("未绑定店铺~", "error");
        } */
      }
    }

    async function handleMinusFromCart(product) {
      //从购物车减商品
      if (useUser().hasLogin) {
        if (product.FQty <= 1 && !(await uModal("要删除该商品吗？"))) return;

        await useShop().MinusToCart(product.FGoodsID);
      } else {
        if (uGetStorageSync("hasBindStore")) {
          uNavigateTo("/pages/login/login");
        } else {
          uToast("未绑定店铺~", "error");
        }
      }
    }

    function goToDetail(goods) {
      uNavigateTo("/pages/goods/detail?id=" + goods.FGoodsID);
    }

    function goShopping() {
      uSwitchTab("/pages/tab_bar/fl");
    }

    /* returns */
    return {
      hasLogin,
      cart,
      tCount,
      tMoney,
      goToLogin,
      handleAddToCart,
      handleMinusFromCart,
      goToDetail,
      goShopping,
      isLoaded,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "./scss/cart.scss";
</style>
